<template>
	<view class="disconnectP">
		<u-navbar :is-back="true" title="设备报修" :custom-back="BackM" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view @click="selectTimeM" style="padding: 0rem 0.5rem;display: flex;
align-items: center;">
					<image style="width: 0.8rem;
height: 0.8rem;
padding: 0.3rem;" src="../../style/image/stati/A33.png" alt="">
						<view style="
font-size: 0.65rem;
font-family: PingFang SC;
font-weight: 300;">{{selectTime}}</view>
				</view>
			</view>
		</u-navbar>
		<view style="background-color: #f3f5f7;
padding: 1rem;" class="repairListsP">

			<view class="repairLists" v-for="(item,index) in repairLists" :key="index">
				<view @click="orderDetailedM" class="repairLists-child">

					<view class="repairLists-top">
						<view style="display: flex;
align-items: center;">
							<view>设备SN号:<span style="font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;">876767676</span></view>
						</view>
					</view>

					<view class="repairLists-head">

						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								报修设备:
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								拉卡拉总代理
							</view>
						</view>


						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								报修时间:
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								拉卡拉总代理
							</view>
						</view>



						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								维修完成:
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">
								2020.09.03 11:09:29安徽省合肥市安徽省合肥市安徽省省合
							</view>
						</view>

						<view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                ">
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  ">
								地址:
							</view>
							<view style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">
								安徽省合肥市瑶海区珍珠路8号区珍珠路8号 区珍珠路8号区珍珠路
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-empty style="margin-top: 3rem;" v-if="repairLists.length==0" text="暂无数据" mode="data"></u-empty>

		</view>

		<!-- <u-calendar v-model="show" :mode="mode" @change="calendarChange"></u-calendar> -->

		<u-popup v-model="popupShow" mode="bottom">


			<view>
				<view style="text-align: center;margin: 1rem 0rem 0rem 0rem;">请选择筛选类型:</view>

				<view class="classesifyP">

					<view class="classesify">
						<view :class="selectIfy==1?'classesify-puc':'classesify-pucs' " @click="pucM">按月</view>
						<!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

						<view class="classesify-buss" @click="busM" v-if="selectIfy == 2">按日</view>
						<view class="classesify-bus" @click="busM" v-else>按日</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker v-model="pickerShow" @confirm="pickerConfirm" mode="time"></u-picker>

		<u-select v-model="selectShow" :default-value=[10,10] mode="mutil-column" :list="list" @confirm="selectConfirm"></u-select>



	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findMaintainOrderList
	} from "../../utils/uniApi";

	import uLoadmore from '../../uview-ui/components/u-loadmore/u-loadmore.vue'
	import uEmpty from '../../uview-ui/components/u-empty/u-empty.vue'
	import uModal from '../../uview-ui/components/u-modal/u-modal.vue'
	import uPopup from '../../uview-ui/components/u-popup/u-popup.vue'
	import uSelect from '../../uview-ui/components/u-select/u-select.vue'


	import Unavbar from "../../uview-ui/components/u-navbar/u-navbar.vue";
	import uPicker from "../../uview-ui/components/u-picker/u-picker.vue";


	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			"u-navbar": Unavbar,
			"u-picker": uPicker,
			"u-loadmore": uLoadmore,
			"u-empty": uEmpty,
			"u-modal": uModal,
			"u-popup": uPopup,
			"u-select": uSelect
		}

	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public show = false;
		public mode = "range";

		//加载
		public status = "nomore";
		public loadText = {
			loadmore: "轻轻上拉",
			loading: "努力加载中",
			nomore: "实在没有了",
		};

		public continueTypes = true;
		public pageData = 1;

		public selectTime = "请选择日期";
		public repairLists: any = [];

		public selectIfy: any = 0;

		public popupShow = false
		public pickerShow = false
		public selectShow = false

		public list = [
			[{
					value: '1',
					label: '2010'
				},
				{
					value: '2',
					label: '2011'
				},
				{
					value: '3',
					label: '2012'
				},
				{
					value: '4',
					label: '2013'
				},
				{
					value: '5',
					label: '2014'
				},
				{
					value: '6',
					label: '2015'
				},
				{
					value: '7',
					label: '2016'
				},
				{
					value: '8',
					label: '2017'
				},
				{
					value: '9',
					label: '2018'
				},
				{
					value: '10',
					label: '2019'
				},
				{
					value: '11',
					label: '2020'
				},
				{
					value: '12',
					label: '2021'
				},
			],
			[{
					value: '13',
					label: '1'
				},
				{
					value: '14',
					label: '2'
				},
				{
					value: '15',
					label: '3'
				},
				{
					value: '16',
					label: '4'
				},
				{
					value: '17',
					label: '5'
				},
				{
					value: '18',
					label: '6'
				},
				{
					value: '19',
					label: '7'
				},
				{
					value: '20',
					label: '8'
				},
				{
					value: '21',
					label: '9'
				},
				{
					value: '22',
					label: '10'
				},
				{
					value: '23',
					label: '11'
				},
				{
					value: '24',
					label: '12'
				},
			],

		]

		public dateType = '' //month 按月查询,day 按天查询
		public dateTime = '' // 日期

		created() {
			this.accordingM();
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}

		busM() {
			//方法中获取this
			this.selectIfy = 2;

			this.popupShow = false
			this.pickerShow = true

			setTimeout(() => {

				this.selectIfy = 0;
			}, 1000)
		}

		pucM() {
			console.log(12312312);
			this.selectIfy = 1;

			this.popupShow = false
			this.selectShow = true

			setTimeout(() => {

				this.selectIfy = 0;
			}, 1000)


		}

		accordingM() {
			uni.showLoading({
				title: "加载中",
			});

			this.repairLists = []

			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
				maintainStatus: "1", //	维修状态（0 待维修 ，已维修）
				dateType: this.dateType, //month 按月查询,day 按天查询
				dateTime: this.dateTime, //	时间
				pageNo: this.pageData,
				pageSize: "10",
			};

			findMaintainOrderList(params).then((res: any) => {
				console.log(res, "维修单列表");

				var boolee = res.data.hasNext == false && this.continueTypes == false;

				if (res.data.hasNext == true) {
					this.status = "loadmore";
				} else {
					this.status = "nomore";
				}

				console.log(res.data.hasNext, this.continueTypes, boolee);

				if (res.data.isFirst || !boolee) {
					res.data.data.filter((item: any, index: number) => {
						this.repairLists.push(item);

						uni.hideLoading();

						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}
					});
					uni.hideLoading();
				} else {
					alert("buzhix");
					uni.hideLoading();
				}
			});
		}

		selectTimeM() {
			this.popupShow = !this.show;
		}

		calendarChange(data: any) {
			console.log(data.startDate.split("-"));
			this.selectTime =
				data.startDate.split("-")[0] + "-" + data.startDate.split("-")[1];
		}

		BackM() {

			console.log(888);
			uni.navigateTo({
				url: "../equipment/repair",
				animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
				animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
				success: function(res) {},
				fail: function(res) {},
			});

		}

		pickerConfirm(data: any) {
			console.log('按日起', data)
			this.selectTime = data.year + '-' + data.month + '-' + data.day

			this.dateType = 'day'
			this.dateTime = data.year + '-' + data.month + '-' + data.day

			this.accordingM()


		}

		selectConfirm(data: any) {
			console.log(data)

			let str = (data[0] as any).label + '-' + (data[1] as any).label

			this.selectTime = str
			console.log(str)

			this.dateType = 'month'
			this.dateTime = str
			this.accordingM()

		}


	}
</script>

<style lang="scss" scoped>
	.disconnectP {
		background-color: #f3f5f7;
		height: 100vh;
	}

	.repairLists {
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.2rem;
		/* padding: 1rem; */
		/* margin: 1rem; */
	}

	.repairLists-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0.5rem;
		border-bottom: 1px solid #e8e8e8;
	}

	.repairLists-child {
		border-bottom: 1px solid #e5e5e5;
	}

	.repairLists-head {
		padding: 1rem;
	}


	.classesifyP {
		text-align: center;
		display: flex;
		justify-content: center;

		padding: 1rem 1rem 3rem 1rem;
	}

	.classesify {
		width: 6rem;
		height: 1.8rem;
		border: 1px solid #02af74;

		display: flex;
		align-items: center;
		border-radius: 10px;
		/* //   background-color: red; */
	}

	.classesify-puc {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}

	.classesify-pucs {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.classesify-bus {
		width: 50%;
		font-size: 0.6rem;
	}

	.classesify-buss {
		width: 50%;
		font-size: 0.6rem;
		border-bottom-right-radius: 8px;
		border-top-right-radius: 8px;
		height: 100%;
		line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #02af74;
	}
</style>
